<template>
  <div id="components-layout-demo-basic">
    <a-layout-header ref="headerDemo">
      <Header></Header>
    </a-layout-header>
    <div :style="layoutHeight">
      <router-view />
    </div>
    <div>
      <a-icon
        :type="LeftHidden ? 'left-circle' : 'right-circle'"
        theme="twoTone"
        :class="LeftHidden ? 'iconPosition' : 'iconPositionFalse'"
        @click="fold"
      />
    </div>
    <div>
      <a-icon
        type="right-circle"
        theme="twoTone"
        class="iconPositionRight"
        v-show="RightHidden"
        @click="foldRight"
      />
    </div>
  </div>
</template>

<script>
import Header from "@/page/Header/index.vue";
import { mapState } from "vuex";
export default {
  components: { Header },
  name: "home",
  data() {
    return {
      layoutHeight: {
        height: `calc(100vh - 64px)`,
      },
      headerHeight: "",
      active: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.layoutHeight.height);
      this.headerHeight = this.$refs.headerDemo.$el.offsetHeight;

      // this.layoutHeight = this.layoutHeight - this. headerHeight
      // console.log('Header height:', headerHeight,this.layoutHeight);
    });
  },
  methods: {
    fold() {
      this.$store.commit("setLeftHidden");
    },
    foldRight() {
      this.$store.commit("setRightHidden");
    },
  },
  computed: {
    ...mapState([
      "setLeftHidden",
      "LeftHidden",
      "setRightHidden",
      "RightHidden",
    ]),
  },
};
</script>

<style scoped>
#components-layout-demo-basic {
  /* text-align: center; */
  position: relative !important;
}
#components-layout-demo-basic .ant-layout-header {
  padding: 0 !important;
}
#components-layout-demo-basic .ant-layout-footer {
  color: #fff;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-sider {
  color: #fff;
  line-height: 120px;
}
#components-layout-demo-basic .ant-layout-content {
  color: #fff;
  min-height: 120px;
  line-height: 120px;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
.iconPosition {
  position: absolute;
  left: 390px;
  bottom: 22px;
  font-size: 20px;
  z-index: 999;
}
.iconPositionFalse {
  position: absolute;
  left: 40px;
  bottom: 45px;
  font-size: 20px;
  z-index: 999;
}
.iconPositionRight {
  position: absolute;
  right: 390px;
  bottom: 45px;
  font-size: 20px;
  z-index: 999;
}
</style>
